<template>
    <div id="ds27">
        <Breadcrumb style="margin-bottom: 10px">
            <BreadcrumbItem to="/superAdmin">首页</BreadcrumbItem>
            <BreadcrumbItem>司机管理</BreadcrumbItem>
            <BreadcrumbItem>提现申请</BreadcrumbItem>
        </Breadcrumb>
        <div style="padding-right: 20px">
            <Select v-model="type" style="width:200px;">
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select> &nbsp;
            <DatePicker v-model="startTime" type="date" placeholder="选择开始时间" style="width: 150px"></DatePicker>
            至
            <DatePicker v-model="endTime" type="date" placeholder="选择结束时间" style="width: 150px"></DatePicker>
            &nbsp;
            <Button type="info" @click="search()">查询</Button>
            <Button type="info" @click="handleDownload()" style="float: right">下载报表</Button>
        </div>
        <div style="margin-top: 10px">
            <Table :maxWidth="1000" :minWidth="10" stripe :columns="columns" :data="data"
                   v-if="data&&data.length>0"></Table>

            <Page :total="pageTotal" :current="curPage" @on-change="pageChange"
                  style="display: inline-block;padding-top: 10px;padding-bottom: 10px" show-elevator
                  v-if="data&&data.length>0"/>
            <div style="padding-left: 10px;position:relative ;display: inline-block;height: 52px;line-height: 52px;top: -12px">
                总计 {{pageTotal}} 条数据
            </div>
        </div>
        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>

        <Modal v-model="modeBool" fullscreen>
            <div style="text-align:left;font-size: 16px">
                <div style="margin: 3px">手机号码:&nbsp;<span>{{modeData.mobile}}</span></div>
                <div style="margin: 3px">注册时间:&nbsp;<span>{{modeData.registeTime1}}</span></div>
                <div style="margin: 3px">注册地点:&nbsp;<span>{{modeData.address}}</span></div>
                <div style="margin: 3px">推荐码:&nbsp;<span>{{modeData.referrer1}}</span></div>
                <div style="margin: 3px">是否认证:&nbsp;<span>{{modeData.validStatus1}}</span></div>
                <div style="margin: 3px">用户等级:&nbsp;<span>{{modeData.currentLevel}}</span></div>
                <div style="margin: 3px">用户状态:&nbsp;<span>{{modeData.status1}}</span></div>
                <div style="margin: 3px">姓名:&nbsp;<span>{{modeData.realName}}</span></div>
                <div style="margin: 3px">身份证号码:&nbsp;<span>{{modeData.cardNum}}</span></div>
                <div style="margin: 3px">身份证照片:</div>
                <div style="margin: 3px"><img :src="modeData.cardPhoto1" v-if="modeData.cardPhoto1" alt=""
                                              style="margin: 5px" width="420px">
                    <img :src="modeData.cardPhoto2" alt="" v-if="modeData.cardPhoto2" style="margin: 5px" width="420px">
                </div>
                <div style="margin: 3px">准驾车型:&nbsp;<span>{{modeData.driverCarType}}</span></div>
                <div style="margin: 3px">档案编号:&nbsp;<span>{{modeData.fileNumber}}</span></div>
                <div style="margin: 3px">驾驶证照片:</div>
                <div style="margin: 3px"><img :src="modeData.driveCardPhoto1" v-if="modeData.driveCardPhoto1" alt=""
                                              style="margin: 5px" width="420px">
                    <img :src="modeData.driveCardPhoto2" alt="" v-if="modeData.driveCardPhoto2" style="margin: 5px"
                         width="420px"></div>


            </div>
            <div slot="footer">
                <Button type="info" @click="modeBool=false">关闭</Button>
            </div>
        </Modal>

        <Modal v-model="dealwith1">
            <p slot="header" style="color:#444;text-align:center">
                <span>选择处理结果</span>
            </p>
            <div style="text-align:left;font-size: 16px;">
                <RadioGroup v-model="radioStr">
                    <Radio label="处理中" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                    <Radio label="提现成功" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                    <Radio label="提现失败" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                </RadioGroup>
            </div>
            <div slot="footer">
                <Button type="info" @click="dealwith1=false">取消</Button>
                <Button type="info" @click="dealWithData()">确认</Button>
            </div>
        </Modal>
        <Modal v-model="dealwith2">
            <p slot="header" style="color:#444;text-align:center">
                <span>选择处理结果</span>
            </p>
            <div style="text-align:left;font-size: 16px;">
                <RadioGroup v-model="radioStr">
                    <Radio label="提现成功" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                    <Radio label="提现失败" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                </RadioGroup>
            </div>
            <div slot="footer">
                <Button type="info" @click="dealwith2=false">取消</Button>
                <Button type="info" @click="dealWithData()">确认</Button>
            </div>
        </Modal>
        <Modal v-model="dealwith3">
            <p slot="header" style="color:#444;text-align:center">
                <span>选择处理结果</span>
            </p>
            <div style="text-align:left;font-size: 16px;">
                <RadioGroup v-model="radioStr">
                    <Radio label="处理中" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                    <Radio label="提现成功" style=" font-size: 18px;padding: 2px"></Radio>
                    <br>
                </RadioGroup>
            </div>
            <div slot="footer">
                <Button type="info" @click="dealwith3=false">取消</Button>
                <Button type="info" @click="dealWithData()">确认</Button>
            </div>
        </Modal>

    </div>
</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';
    export default{
        data(){
            return {
                type: "0",
                radioStr: "0",
                dealwith1: false,
                dealwith2: false,
                dealwith3: false,
                typeList: [
                    {
                        value: '0',
                        label: '未打款'
                    },
                    {
                        value: '1',
                        label: '处理中'
                    },
                    {
                        value: '2',
                        label: '提现成功'
                    },
                    {
                        value: '3',
                        label: '提现失败'
                    }
                ],
                startTime: "",
                id: "",
                index: 0,
                endTime: "",
                modeData: {},
                modeBool: false,
                selectMobile: "",
                loading: false,
                pageTotal: 0,
                curPage: 0,
                columns: [{
                    title: '提现时间',
                    key: 'createTime1',
                    width: 155
                }, {
                    title: '提现金额',
                    key: 'money',
                }, {
                    title: '用户类型',
                    key: 'type1',
                }, {
                    title: '手机号码',
                    key: 'mobile',
                },
                    {
                        title: '真实姓名',
                        key: 'realName',
                    },
                    {
                        title: '用户等级',
                        key: 'currentLevel'
                    },
                    {
                        title: '提现渠道',
                        key: 'channel'
                    },
                    {
                        title: '提现状态',
                        key: 'isPay1'
                    }, {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    }, style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.id = params.row._id;
                                            this.index = params.index;

                                            if (params.row.isPay == 0) {
                                                this.dealwith1 = true;
                                                this.radioStr = "处理中"
                                            }

                                            if (params.row.isPay == 1) {
                                                this.dealwith2 = true;
                                                this.radioStr = "提现成功"
                                            }

                                            if (params.row.isPay == 3) {
                                                this.dealwith3 = true;
                                                this.radioStr = "处理中"
                                            }

                                        }
                                    }
                                }, '处理')
                            ]);
                        }
                    }
                ],
                data: []
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            rowData(data, index){
                this.modeData = data;
                this.modeBool = true;
            }, dealWithData(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('accountId', this.id);

                if (this.radioStr == '未打款') {
                    param.append('isPay', "0");
                }
                if (this.radioStr == '处理中') {
                    param.append('isPay', "1");
                }
                if (this.radioStr == '提现成功') {
                    param.append('isPay', "2");
                }
                if (this.radioStr == '提现失败') {
                    param.append('isPay', "3");
                }
                this.loading = true;
                Axios.post(ipServer + "accountManage/payMoneyToUser", param)
                        .then(res => {
                            this.loading = false;
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                this.data.splice(this.index, 1);
                                this.$Message.info("处理成功!");
                                this.dealwith1 = false;
                                this.dealwith2 = false;
                                this.dealwith3 = false;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$Message.info(res.data.msg);
                                this.$router.push("/login");
                            } else {
                                this.$Message.info(res.data.msg);
                            }


                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            search(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('isPay', this.type);

                if (this.selectMobile) {
                    param.append('selectMobile', this.selectMobile + "");
                }
                if (this.startTime) {
                    param.append('startTime', sessionUtils.DateToTime(this.startTime) + "");
                }
                if (this.endTime) {
                    param.append('endTime', sessionUtils.DateToTime(this.endTime) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "accountManage/selectCashApplyList", param)
                        .then(res => {

                            console.log("打印ddd" + JSON.stringify(res));
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                for (var i = 0; i < res.data.data.result.length; i++) {
                                    res.data.data.result[i].registeTime1 = sessionUtils.timestampToTime(res.data.data.result[i].registeTime);
                                    res.data.data.result[i].createTime1 = sessionUtils.timestampToTime(res.data.data.result[i].createTime);
                                    if (res.data.data.result[i].isPay == 0) {
                                        res.data.data.result[i].isPay1 = "未打款";
                                    }
                                    if (res.data.data.result[i].isPay == 1) {
                                        res.data.data.result[i].isPay1 = "处理中";
                                    }
                                    if (res.data.data.result[i].isPay == 2) {
                                        res.data.data.result[i].isPay1 = "提现成功";
                                    }
                                    if (res.data.data.result[i].isPay == 3) {
                                        res.data.data.result[i].isPay1 = "提现失败";
                                    }

                                    if (res.data.data.result[i].userType == "1") {
                                        res.data.data.result[i].type1 = "司机";
                                    }
                                    if (res.data.data.result[i].userType == "2") {
                                        res.data.data.result[i].type1 = "配件商";
                                    }
                                    if (res.data.data.result[i].userType == "3") {
                                        res.data.data.result[i].type1 = "修理";
                                    }
                                    if (res.data.data.result[i].userType == "4") {
                                        res.data.data.result[i].type1 = "补胎";
                                    }
                                    if (res.data.data.result[i].userType == "5") {
                                        res.data.data.result[i].type1 = "审车";
                                    }
                                    if (res.data.data.result[i].userType == "6") {
                                        res.data.data.result[i].type1 = "加油";
                                    }
                                    if (res.data.data.result[i].userType == "7") {
                                        res.data.data.result[i].type1 = "吊车";
                                    }
                                }
                                this.data = res.data.data.result;
                                this.pageTotal = res.data.data.dataTotal;
                                this.curPage = res.data.data.curPage;
                                if (this.data.length == 0)
                                    this.$Message.info("查询数据不存在!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$Message.info(res.data.msg);
                                this.$router.push("/login");

                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            pageChange(page){
                this.getData(page);
            },
            getData(page){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('isPay', this.type);
                if (page) {
                    param.append('pageId', page + "");
                }
                if (this.selectMobile) {
                    param.append('selectMobile', this.selectMobile + "");
                }
                if (this.startTime) {
                    param.append('startTime', sessionUtils.DateToTime(this.startTime) + "");
                }
                if (this.endTime) {
                    param.append('endTime', sessionUtils.DateToTime(this.endTime) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "accountManage/selectCashApplyList", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                for (var i = 0; i < res.data.data.result.length; i++) {
                                    res.data.data.result[i].registeTime1 = sessionUtils.timestampToTime(res.data.data.result[i].registeTime);
                                    res.data.data.result[i].createTime1 = sessionUtils.timestampToTime(res.data.data.result[i].createTime);

                                    if (res.data.data.result[i].isPay == 0) {
                                        res.data.data.result[i].isPay1 = "未打款";
                                    }
                                    if (res.data.data.result[i].isPay == 1) {
                                        res.data.data.result[i].isPay1 = "处理中";
                                    }
                                    if (res.data.data.result[i].isPay == 2) {
                                        res.data.data.result[i].isPay1 = "提现成功";
                                    }
                                    if (res.data.data.result[i].isPay == 3) {
                                        res.data.data.result[i].isPay1 = "提现失败";
                                    }

                                    if (res.data.data.result[i].userType == "1") {
                                        res.data.data.result[i].type1 = "司机";
                                    }
                                    if (res.data.data.result[i].userType == "2") {
                                        res.data.data.result[i].type1 = "配件商";
                                    }
                                    if (res.data.data.result[i].userType == "3") {
                                        res.data.data.result[i].type1 = "修理";
                                    }
                                    if (res.data.data.result[i].userType == "4") {
                                        res.data.data.result[i].type1 = "补胎";
                                    }
                                    if (res.data.data.result[i].userType == "5") {
                                        res.data.data.result[i].type1 = "审车";
                                    }
                                    if (res.data.data.result[i].userType == "6") {
                                        res.data.data.result[i].type1 = "加油";
                                    }
                                    if (res.data.data.result[i].userType == "7") {
                                        res.data.data.result[i].type1 = "吊车";
                                    }
                                }
                                this.data = res.data.data.result;
                                this.pageTotal = res.data.data.dataTotal;
                                this.curPage = res.data.data.curPage;
                                if (this.data.length == 0)
                                    this.$Message.info("查询数据不存在!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }, handleDownload() {
                this.loading = true;
                const list = this.data;
                require.ensure([], () => {
                    const {export_json_to_excel} = require('../../assets/js/Export2Excel') //这个地址和页面的位置相关，这个地址是Export2Excel.js相对于页面的相对位置
                    const tHeader = ["提现时间", "提现金额", "用户类型", "手机号码", "真实姓名", "用户等级", "提现渠道", "提现状态"]; //这个是表头名称 可以是iveiw表格中表头属性的title的数组
                    const filterVal = ["createTime1", "money", "type1", "mobile", "realName", "currentLevel", "channel", "isPay1"]; //与表格数据配合 可以是iview表格中的key的数组
                    const data = this.formatJson(filterVal, list)
                    export_json_to_excel(tHeader, data, '提现申请') //列表excel  这个是导出表单的名称
                    this.loading = false
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }
        }
    }
</script>


<style scoped>
    @import "../../assets/css/loading.css";

</style>